<template>

  <div class='container'>
<el-dialog
  title="提示"
  :visible="previewVisible"
  width="80%"
  :before-close="handleClose"
>
  <div>
    <!-- 标题 -->
    <div class="container-header">
      <h3>{{articles.title}}</h3>
    </div>
    <!-- 标题 -->

    <!-- 副标题 -->
    <div class="container-header-f">

    <span>{{articles.createTime |  formData}}  </span>

    <span>超级管理员</span>

    <span><i class="el-icon-view"></i></span>

    <span>{{articles.visits}}</span>

    </div>

    <!-- 副标题 -->

    <!-- 文章内容 -->
    <div class="container-body" v-html="articles.articleBody">

    </div>
    <!-- 文章内容 -->
  </div>

</el-dialog>
</div>
</template>

<script>

// 文章详情接口
import { detail } from '@/api/hmmm/articles.js'

// 引入时间格式函数
import { parseTimeByString } from '@/filters/index'

export default {
  name: 'Preview',
  props: {
    previewVisible: {
      typeof: Boolean
    }
  },
  filters: {
    formData (val) {
      return parseTimeByString(val, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  data () {
    return {
      articles: {

      }
    }
  },
  methods: {
    // 获取详情，回写数据
    async handlepreview (id) {
      const res = await detail({ id: id })
      this.articles = res.data
    },
    handleClose () {
      this.$emit('handleClose', false)
    }

  }
}
</script>

<style scoped lang='less'>
/deep/ .container{
  width: 500px !important ;
  height: 500px !important
}
.container-header-f span{
  margin-right: 15px;
}
.container-body{
  background:rgb(245, 245, 245);
}
/deep/ .el-dialog__body {
    padding: 10px 20px !important;
}
</style>
